<template>
  <div>
    <el-dialog title="骑手订单" v-dialogDrag :visible.sync="showShopperDialog" width="85%">
      <el-row type="flex" align="middle" justify="end" style="margin-bottom: 10px;">
        <pt-date-picker style="width: 500px;" v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
        <el-button size="small" style="margin:0 10px;" @click="exportExcelDetail()" v-loading="ExcelLoading">
          导出表格<i class="el-icon-download"></i>
        </el-button>
        <el-button type="primary" size="small" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
      </el-row>
      <el-table :data="tableDetails.rows">
        <el-table-column prop="createTime" label="订单日期" min-width="140" align="left" />
        <el-table-column prop="orderCode" label="订单编号" min-width="120" align="left" />
        <el-table-column prop="businessName" label="商家名称" min-width="160" align="left" />
        <el-table-column prop="readyTime" label="订单完成时间" min-width="140" align="left" />
        <el-table-column prop="deliveryFee" label="原配送费" min-width="120" align="right" />
        <el-table-column prop="showps" label="实配送费" min-width="120" align="right" />
        <el-table-column prop="riderTip" label="打赏小费" min-width="120" align="right" />
        <el-table-column prop="shopperMoney" label="外卖佣金" min-width="120" align="right" />
      </el-table>
      <pt-table-loading v-show="isloadingTable"/>
      <pt-pagination ref="pagination" :total="tableDetails.total" @listeningEvent="triggerEvent" />
      <el-table v-show="false" :data="tableDetailsExlx" id="out-tables" :summary-method="getSummaries" show-summary>
        <el-table-column prop="createTime" label="订单日期" />
        <el-table-column prop="orderCode" label="订单编号"/>
        <el-table-column prop="businessName" label="商家名称" />
        <el-table-column prop="readyTime" label="订单完成时间" />
        <el-table-column prop="deliveryFee" label="原配送费" />
        <el-table-column prop="showps" label="实配送费" />
        <el-table-column prop="riderTip" label="打赏小费"  />
        <el-table-column prop="shopperMoney" label="外卖佣金"  />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { paySatus } from '@/utils/ptkc.js'
import acction from '@/utils/acction.js'
export default {
  props: {
    date: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      paySatus: paySatus,
      params: { // 骑手订单明显参数
        page: 0,
        size: 10,
        shopperId: null,
        date: ['', '']
      },
      ExcelLoading: false,
      showShopperDialog: false, // 显示骑手订单明显
      tableDetails: {},
      tableDetailsExlx: [],
      total: null,
      isloadingTable: false // 骑手弹窗等待
    }
  },
  methods: {
    triggerEvent(type, val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.shopperDetails()
      },
      exportExcelDetail() { // 下载表格
        this.ExcelLoading = true
        const params = { ...this.params }
        params.createtime1 = params.date?params.date[0] : ''
        params.createtime2 = params.date?params.date[1] : ''
        params.page = 0
        params.size = this.total
        delete params.date
        this.$http.get('/server/shopper/shopperOrderInfo?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableDetailsExlx = res.data.data.rows
            setTimeout(() => {
              this.ExcelLoading = false
              const title = `${this.name + this.params.date[0].slice(0, 10)}-${this.params.date[1].slice(0, 10)}`
              this.$emit('downExlc', document.querySelector('#out-tables'), title)
            }, 500)
          }
        }).finally(() => { this.ExcelLoading = false })
      },
      getSummaries(param) { // 表格统计
        const {columns, data} = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return new acction(prev,curr).accAdd()
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = 'N/A'
          }
        })
        return sums
      },
      shopperDetails(item) { //获取骑手
        if (item) {
          this.name = item.shopper
          this.params.shopperId = item.shopperId
          this.$nextTick(() => {
            this.params.date = this.date
          })
        }
        this.showShopperDialog = true
        const params = { ...this.params }
        params.createtime1 = params.date ? params.date[0] : ''
        params.createtime2 = params.date ? params.date[1] : ''
        this.isloadingTable = true
        delete params.date
        this.$http.get('/server/shopper/shopperOrderInfo?'+this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableDetails = res.data.data
            this.total = res.data.data.total
          }
        }).finally(() => { this.isloadingTable = false })
      },
  }
}
</script>